
<template>
  <div class="forecast">
    <!-- 配额总览 -->
    <a-row class="">
      <a-col :md="6" class="quotaOverview">
        <a-dropdown>
          <a class="ant-dropdown-link forecast_flex" @click.prevent>
            <div class="title">填报时间</div>
            <div class="select">2021年度</div>
            <a-icon type="down" />
          </a>
          <template #overlay>
            <a-menu @click="onClick">
              <a-menu-item key="1">2021年度</a-menu-item>
              <a-menu-item key="2">2021年度</a-menu-item>
              <a-menu-item key="3">2021年度</a-menu-item>
              <a-menu-item key="4">2021年度</a-menu-item>
              <a-menu-item key="5">2021年度</a-menu-item>
              <a-menu-item key="6">2021年度</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
        <div class="forecast_val">
          <div>
            <span class="title">预测分配总量</span>&nbsp;<a-icon type="exclamation-circle" /> &nbsp;
            <span class="small_text">单位：tCO₂e</span>
          </div>
          <p class="Num">0.00</p>
        </div>
        <div>
          <span class="forecast">预测<a-icon type="swap-right" /></span>
        </div>
      </a-col>
      <a-col :md="8" class="Structure_box_right">
        <div class="tltle"></div>
        <div>
          <!-- <Pie :dataSource="dataSource" :title="title"></Pie> -->
        </div>
      </a-col>
      <a-col :md="10" class="">
        <div class="tltle"></div>
        <div>
          <!-- <LineChartMultid :dataSource="dataSource1" :title="title" :fields="fields"></LineChartMultid> -->
        </div>
      </a-col>
    </a-row>

    <a-row>
      <div class="function_box">
        <div style="margin-bottom: 10px">
          <a-button type="primary " class="btn avtive" :size="big"> 新增配额预测 </a-button>
        </div>

        <div class="function">
          <div>
            <a-button type="primary" class="btn avtive" :size="size"> 预测任务 </a-button>
            <a-button type="primary" class="btn noactive" :size="size"> 预测记录 </a-button>
          </div>
          <div class="search_box_right">
            <a-input-search v-model="value" placeholder="核算单元" style="width: 200px" @search="onSearch" />
          </div>
        </div>
      </div>
      <!-- 配额总览 -->
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
      </a-table>
    </a-row>
  </div>
</template>

<script>
// import Pie from '@/components/chart/Pie'
// import LineChartMultid from '@/components/chart/LineChartMultid'
export default {
  components: {
    // Pie,
    // LineChartMultid,
  },
  data() {
    return {
      dataSource: [  { item: '预测配额', count: 1 }],
      fields:[
          '分配tCO₂e'
      ],
      title:'预测配额',
      dataSource1: [  { type: '一月', '分配tCO₂e': 7.0},
          { type: '二月', '分配tCO₂e': 6.9 },
          { type: '三月', '分配tCO₂e': 9.5 },
          { type: '四月', '分配tCO₂e': 14.5},
          { type: '五月', '分配tCO₂e': 18.4 },
          { type: '六月', '分配tCO₂e': 21.5 },
          { type: '七月', '分配tCO₂e': 25.2 },
          { type: '八月', '分配tCO₂e': 26.5 },
          { type: '九月', '分配tCO₂e': 23.3  },
          { type: '十月', '分配tCO₂e': 18.3 },
          { type: '十一月', '分配tCO₂e': 13.9 },
          { type: '十二月', '分配tCO₂e': 9.6}],
      size: '',
      big: 'large',
      columns: [
        {
          title: '预测年度',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '核算单元',
          align: 'center',
          dataIndex: 'miaosu',
        },
        {
          title: '配额纳管区域',
          align: 'center',
          dataIndex: 'company',
        },
        {
          title: '所属行业',
          align: 'center',
          dataIndex: 'people',
        },
        {
          title: '配额核定补充分类',
          align: 'center',
          dataIndex: 'state',
        },
        {
          title: '预测配额数量tCO₂e',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '更新日期',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
        {
          title: '操作',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
      ],
      distribution: [
        { name: '2022年', value: '暂无' },
        { name: '2021年', value: '暂无' },
        { name: '2020年', value: '暂无' },
        { name: '2019年', value: '暂无' },
        { name: '2018年', value: '暂无' },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.forecast {
  .Structure_box_right {
    border-left: 1px solid #e9edf1;
    border-right: 1px solid #e9edf1;
  }
  .quotaOverview {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .forecast_flex {
      display: flex;
      width: fit-content;
      flex-direction: row;
      align-items: center;
      margin-bottom: 10px;
      .title {
        margin-right: 10px;
        color: #666;
      }
      .select {
        color: #ccc;
      }
    }
  }
  .forecast_val {
    .title {
      font-size: 16px;
      font-weight: 400;
      margin-bottom: 10px;
    }
    .small_text {
      color: #818389;
      font-size: 12px;
      font-weight: 500;
      margin-bottom: 20px;
    }
    .Num {
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 30px;
      color: #000;
    }
  }
  .forecast {
    padding: 4px 10px;
    color: rgba(12, 103, 238, 0.5);
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid rgba(12, 103, 238, 0.5);
    .anticon {
      margin-left: 6px;
      font-weight: 600;
      font-size: 16px;
      color: rgba(12, 103, 238, 0.5);
    }
  }
  .function_box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .function {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    .avtive {
      background: #0c67ee;
    }
    .noactive {
      background-color: #f0f2f6;
      color: #333;
      border: #f0f2f6;
    }
    .btn {
      margin-right: 6px;
      font-size: 14px;
    }
  }

  .bottom_quotas {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    .name {
      font-size: 12px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .anticon {
        font-size: 22px;
        margin-right: 6px;
      }
    }
    .val {
      font-size: 22px;
      margin-top: 2px;
      font-weight: 600;
    }
  }
  // 配额总览
  .quotaOverview {
    background: url('@/assets/img/assets/bg_1.png');
    background-size: cover;
    padding: 20px;
    .quota {
      height: 80px;
      .top {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .bg {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(233, 237, 241, 0.2);
      }
      .title {
        font-size: 12px;
      }
      .h4 {
        font-size: 16px;
      }
      .val {
        margin-top: 6px;
        font-size: 12px;
      }
      .anticon {
        margin-right: 6px;
      }
    }
  }
  // 分配/交易
  .distribution {
    display: flex;
    flex-direction: row;
    // width: 100%;
    padding: 0 20px;
    ul {
      padding: 0;
      width: 100%;
      margin-top: 10px;
      li {
        list-style: none;
        border-bottom: 1px solid #e7e7e7;
        padding: 10px 0px;
        display: flex;
        flex-direction: row;
        // justify-content: space-between;
        justify-content: flex-start;
        div {
          width: 50%;
          font-size: 12px;
        }
        .forecast {
          padding: 4px 10px;
          color: rgba(12, 103, 238, 0.5);
          margin-left: 10px;
          cursor: pointer;
          border-radius: 4px;
          border: 1px solid rgba(12, 103, 238, 0.5);
          .anticon {
            margin-left: 6px;
            font-weight: 600;
            font-size: 16px;
            color: rgba(12, 103, 238, 0.5);
          }
        }
      }
    }
  }
}
</style>